<template>
	<!-- <chat-suit-emoji id="chat-suit-emoji" bind:newEmojiStr="emojiAction"></chat-suit-emoji> -->
	<form class="text-input">
		<view :class="isIPX ?'f-row-x' :'f-row'">
			<view class="cyy" @click="cyyFlag=!cyyFlag">常用语</view>
			<!-- 发送语音 -->
			<view>
				<image class="icon-mic" src="/static/images/voice.png" @tap="openRecordModal"></image>
			</view>
			<!-- 输入框 -->
			<textarea class="f news" type="text" cursor-spacing="65" confirm-type='done' v-model="inputMessage"
				@confirm="sendMessage" @input="bindMessage" @tap="focus" @focus="focus" @blur="blur"
				:confirm-hold="isIPX ? true : false" auto-height :show-confirm-bar='false' maxlength="300" />

			<view>
				<image class="icon-mic" src="/static/images/Emoji.png" @tap="openEmoji"></image>
			</view>
			<view v-show="!inputMessage" @tap="openFunModal">
				<image class="icon-mic" src="/static/images/ad.png"></image>
			</view>
			<button class="send-btn-style" hover-class='hover' @tap="sendMessage" v-show="inputMessage">发送</button>
		</view>
		<view class="cyyList" :class="cyyFlag?'autoHeight':''" v-if="cyyFlag">
			<u-swipe-action> 
				<u-swipe-action-item :options="options1" v-for="(item,index) in cyyData" @click="info=>delCyy(item)" :key="item.id">
					<view class="swipe-action u-border-top u-border-bottom" >
						<view class="swipe-action__content cyyItem" @click="toCyy(item.statement)">
							<text class="swipe-action__content__text">{{item.statement}}</text>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
			<!-- 			<view class="cyyItem" v-for="(item,index) in cyyData" @click="toCyy(item.statement)">{{item.statement}}
			</view> -->
			<view class="cyyEdit acea-row row-around">
				<view class="editbtn" @click="cyyAddShow=true">添加</view>
				<!-- <view class="editbtn" @click="delCyy">删除</view> -->
			</view>
		</view>
		<!-- 添加常用于 -->
		<u-modal :show="cyyAddShow"  @confirm="addCyy" @cancel="cyyAddShow=false" :showCancelButton="true">
			<u--textarea v-model="cyyTitle" placeholder="请输入添加的常用语"></u--textarea>
		</u-modal>

	</form>
</template>

<script>
	let WebIM = require("@/pages/chatroom/utils/WebIM")["default"];
	let msgType = require("../../../msgtype");
	let disp = require("@/pages/chatroom/utils/broadcast");
	let msgStorage = require("../../../msgstorage");
	import {
		StatementOnList,
		StatementAdd,
		StatementDelete
	} from '@/api/api.js'
	export default {
		data() {
			return {
				inputMessage: "",
				// render input 的值
				userMessage: "", // input 的实时值
				isIPX: false,
				cyyFlag: false,
				cyyAddShow: false,
				cyyTitle: "",
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				cyyData: []
			};
		},

		components: {},
		props: {
			username: {
				type: Object,
				default: () => ({}),
			},
			chatType: {
				type: String,
				default: msgType.chatType.SINGLE_CHAT,
			},
		},

		// lifetimes
		created() {
			this.setData({
				isIPX: getApp().globalData.isIPX,
			});
			this.getCyy();
		},

		beforeMount() {},

		moved() {},

		destroyed() {},

		mounted() {},

		methods: {
			toCyy(title) {
				this.setData({
					userMessage: title
				});
				this.inputMessage = title
			},
			focus() {
				this.$emit("inputFocused", null, {
					bubbles: true,
				});
			},
			blur() {
				this.$emit("inputBlured", null, {
					bubbles: true,
				});
			},

			isGroupChat() {
				return this.chatType == msgType.chatType.CHAT_ROOM;
			},

			getSendToParam() {
				return this.isGroupChat() ? this.username.groupId : this.username.your;
			},

			bindMessage(e) {
				this.setData({
					userMessage: e.detail.value,
				});
			},

			emojiAction(emoji) {
				var str;
				var msglen = this.userMessage.length - 1;

				if (emoji && emoji != "[del]") {
					str = this.userMessage + emoji;
				} else if (emoji == "[del]") {
					let start = this.userMessage.lastIndexOf("[");
					let end = this.userMessage.lastIndexOf("]");
					let len = end - start;

					if (end != -1 && end == msglen && len >= 3 && len <= 4) {
						str = this.userMessage.slice(0, start);
					} else {
						str = this.userMessage.slice(0, msglen);
					}
				}
				this.userMessage = str;
				this.inputMessage = str;
			},

			sendMessage() {
				let me = this;
				String.prototype.trim = function() {
					return this.replace(/(^\s*)|(\s*$)/g, "");
				};
				if (!this.userMessage.trim()) {
					return;
				}

				let id = WebIM.conn.getUniqueId();
				let msg = new WebIM.message(msgType.TEXT, id);
				// console.log(WebIM.message)
				// return;
				msg.set({
					msg: this.userMessage,
					from: this.username.myName,
					to: this.getSendToParam(),
					// roomType: false,
					chatType: this.chatType,
					success(id, serverMsgId) {
						console.log("成功了");
						me.cyyFlag = false;
						// 关闭表情弹窗
						me.$parent.cancelEmoji()
						me.$parent.closeFunModal()
						disp.fire("em.chat.sendSuccess", id, me.userMessage);
					},
					fail(id, serverMsgId) {
						console.log("失败了");
					},
				});

				if (this.chatType == msgType.chatType.CHAT_ROOM) {
					// msg.setGroup("groupchat");
					msg.setChatType("groupchat");
				}
				WebIM.conn.send(msg.body);
				let obj = {
					msg: msg,
					type: msgType.TEXT,
				};
				this.saveSendMsg(obj);
				this.userMessage = "";
				this.inputMessage = "";
				uni.hideKeyboard();
			},

			saveSendMsg(evt) {
				msgStorage.saveMsg(evt.msg, evt.type);
			},

			openEmoji() {
				this.$emit('openEmoji')
			},
			openRecordModal() {
				this.$emit('openRecordModal')
			},
			openFunModal() {
				this.$emit('openFunModal')
			},
			getCyy() {
				StatementOnList().then(res => {
					console.log(res)
					if (res.code == 200) {
						if (res.data.list && res.data.list.length > 0) {
							this.cyyData = res.data.list
						}
					}
				})
			},
			addCyy() {
				StatementAdd({
					statement: this.cyyTitle
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.cyyAddShow = false;
						this.cyyTitle="";
						this.getCyy();
					}
				})
			},
			delCyy(info) {
				console.log(info);
				let that = this;
				uni.showModal({
					title: "提示",
					content: "是否要删除",
					success(res) {
						if (res.confirm) {
							StatementDelete(info.id).then(res => {
								console.log(res)
								if (res.code == 200) {
									that.getCyy();
								}
							})
						}
					}
				})

			}
		},
	};
</script>
<style>
	@import "./main.css";

	.icon-mic {
		padding: 8rpx 10rpx;
		box-sizing: content-box;
	}

	.send-btn-style {
		padding: 10rpx 20rpx;
	}

	.cyy {
		padding: 8rpx 12rpx;
		background-color: rgb(238, 33, 45);
		color: #fff;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}

	.cyyList {
		height: 0;
		transition: all 0.3s;
		pading-top: 20rpx;
	}

	.cyyItem {
		padding: 30rpx 40rpx;
		/* border-bottom: 1px solid #eee; */
	}

	.cyyEdit {
		position: relative;
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.cyyEdit::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1rpx;
		height: 100%;
		background-color: #eee;
		transform: translate(-50%, -50%);
	}

	.editbtn {
		margin: 0 auto;
		width: 80%;
		padding: 20rpx 40rpx;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}

	.autoHeight {
		height: auto !important;
	}
</style>